<template>
  <div class="login-page">
    <div class="login-container">
      <div class="card">
        <h1>统一登录Demo</h1>
        <p class="subtitle">请点击下方按钮跳转到统一登录中心</p>
        
        <div class="login-info">
          <div class="info-item">
            <span class="label">应用名称：</span>
            <span class="value">{{ appName }}</span>
          </div>
          <div class="info-item">
            <span class="label">应用ID：</span>
            <span class="value">{{ appId }}</span>
          </div>
        </div>
        
        <button class="btn btn-primary btn-large" @click="handleLogin">
          前往统一登录中心
        </button>
        
        <div class="tips">
          <p>💡 统一登录流程说明：</p>
          <ol>
            <li>点击按钮跳转到统一登录中心</li>
            <li>在登录中心完成身份验证</li>
            <li>验证成功后自动跳转回本应用</li>
            <li>应用完成认证后即可访问</li>
          </ol>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { UNIFIED_LOGIN_CONFIG } from '@/config'

const appName = UNIFIED_LOGIN_CONFIG.appName
const appId = UNIFIED_LOGIN_CONFIG.appId

function handleLogin() {
  const callback = encodeURIComponent(window.location.origin + '/')
  const loginUrl = `${UNIFIED_LOGIN_CONFIG.loginUrl}?callback=${callback}&app_name=${UNIFIED_LOGIN_CONFIG.appName}&app_id=${UNIFIED_LOGIN_CONFIG.appId}`
  console.log('[Login] 跳转到统一登录中心:', loginUrl)
  window.location.href = loginUrl
}
</script>

<style scoped>
.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.login-container {
  width: 90%;
  max-width: 500px;
}

.card {
  text-align: center;
}

h1 {
  color: #333;
  font-size: 28px;
  margin-bottom: 8px;
}

.subtitle {
  color: #666;
  margin-bottom: 30px;
}

.login-info {
  background: #f5f5f5;
  border-radius: 4px;
  padding: 20px;
  margin-bottom: 30px;
  text-align: left;
}

.info-item {
  margin-bottom: 12px;
  display: flex;
  align-items: center;
}

.info-item:last-child {
  margin-bottom: 0;
}

.label {
  color: #666;
  font-weight: 500;
  min-width: 90px;
}

.value {
  color: #333;
  font-family: 'Courier New', monospace;
  word-break: break-all;
}

.btn-large {
  width: 100%;
  padding: 14px;
  font-size: 16px;
  font-weight: 500;
}

.tips {
  margin-top: 30px;
  padding: 20px;
  background: #e6f7ff;
  border: 1px solid #91d5ff;
  border-radius: 4px;
  text-align: left;
}

.tips p {
  margin-bottom: 12px;
  color: #0050b3;
  font-weight: 500;
}

.tips ol {
  margin-left: 20px;
  color: #333;
}

.tips li {
  margin-bottom: 8px;
  line-height: 1.6;
}
</style>

